<template>
  <d2-container>
    <template slot="header">Page 2 header</template>
    <div class="toolbar">
      <div class="input-wrap">
        <!-- 班级下拉菜单 -->
        <!-- <div class="toolbar-wrap">
          <slot name="menutitle">班级：</slot>
          <el-select v-model="organization" clearable>
            <el-option
              v-for="item in organizations"
              :key="item.organization_id"
              :label="item.orgname"
              :value="item.organization_id"
            ></el-option>
          </el-select>
        </div> -->

        <div class="toolbar-input">
          <el-input
            placeholder="姓名"
            v-model="studentName"
            clearable
          ></el-input>
        </div>

        <div class="toolbar-input">
          <el-input placeholder="学号" v-model="studentId" clearable></el-input>
        </div>

        <el-button type="primary" icon="el-icon-search" @click="SearchJob"
          >搜索</el-button
        >
      </div>
    </div>

    <div class="add-button">
      <el-button type="primary" size="small" @click="showCreateDialog">
        <i class="el-icon-circle-plus-outline"></i> 添加求职记录
      </el-button>
    </div>
    <!-- 添加求职记录 -->
    <el-dialog
      :close-on-click-modal="false"
      :before-close="resetFrom"
      :visible.sync="dialogVisible"
      :title="titleMap[dialogType]"
      width="570px"
      top="20px"
    >
      <el-form
        ref="form"
        :inline="true"
        :model="form"
        size="small"
        label-width="68px"
      >
        <el-form-item label="岗位类型" prop="jobType">
          <el-input v-model="form.jobType" placeholder="例：技术/产品" />
        </el-form-item>
        <el-form-item label="应聘职位" prop="jobName">
          <el-input v-model="form.jobName" placeholder="例：Java开发工程师" />
        </el-form-item>
        <el-form-item label="投递时间" prop="applyTime">
          <el-date-picker
            v-model="form.applyTime"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
            style="width:180px"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="投递渠道" prop="applyChannel">
          <el-input v-model="form.applyChannel" placeholder="例：智联招聘" />
        </el-form-item>
        <!-- 面试过程 -->
        <el-form-item
          v-for="(interview, index) in form.interviews"
          :label="'笔试/面试过程' + index"
          :key="interview.key"
          :prop="'interviews.' + index + '.content'"
          label-width="570"
        >
          <el-form-item
            label="日期"
            :prop="'interviews.' + index + '.applyTime'"
          >
            <el-date-picker
              v-model="interview.time"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              style="width:180px"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="备注" :prop="'interviews.' + index + '.content'">
            <el-input
              v-model="interview.content"
              placeholder="备注 例：笔试通过"
              style="width:180px"
            />
          </el-form-item>
          <el-button @click.prevent="removeInterview(interview)"
            >删除</el-button
          >
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addInterview" plain>
            <i class="el-icon-circle-plus-outline"></i> 添加笔试/面试过程
          </el-button>
        </el-form-item>
        <el-form-item label="是否拿到offer" label-width="120px">
          <el-switch v-model="form.offer" active-color="#13ce66" />
        </el-form-item>
        <el-form-item label="求职总结" prop="summary">
          <el-input
            v-model="form.summary"
            style="width: 440px;"
            rows="4"
            type="textarea"
            placeholder="写下此次求职总结，专家帮你定位求职失败的原因，分析是简历关，素质关，面试关，求职目标关等，帮助你进一步找到解决的方法.."
          />
        </el-form-item>
        <el-form-item label="公司名称" prop="company">
          <el-input v-model="form.company" placeholder="XX公司" />
        </el-form-item>
        <el-form-item label="联系方式" prop="companyContact">
          <el-input
            v-model="form.companyContact"
            placeholder="老王15212345678"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" size="small" @click="resetFrom">取消</el-button>
        <el-button
          type="primary"
          size="small"
          v-if="dialogType == 'create'"
          @click="submitAdd"
          >确认</el-button
        >
        <el-button type="primary" size="small" v-else @click="submitUpdate"
          >更新</el-button
        >
      </div>
    </el-dialog>
    <!-- 表格部分 -->
    <div class="careerplancomments-table">
      <el-table
        :data="applyjobList"
        v-loading.body="listLoading"
        element-loading-text="拼命加载中"
        size="small"
        border
        highlight-current-row
        @current-change="showComments"
      >
        <el-table-column align="center" width="50" type="index">
        </el-table-column>
        <el-table-column
          align="center"
          label="姓名"
          prop="user.username"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          label="学号"
          prop="user.studentid"
          width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          label="岗位类型"
          prop="job_type"
          style="width: 60px;"
        ></el-table-column>
        <el-table-column
          align="center"
          label="应聘职位"
          prop="job_name"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="投递时间"
          prop="apply_time"
          width="110"
        ></el-table-column>
        <el-table-column
          align="center"
          label="投递渠道"
          prop="apply_channel"
          style="width: 60px;"
        ></el-table-column>
        <el-table-column align="center" label="笔试/面试过程" width="100">
          <template slot-scope="scope">
            <el-popover trigger="click" placement="top">
              <el-table size="small" :data="scope.row.interviews">
                <el-table-column
                  width="170"
                  property="time"
                  label="笔试/面试日期"
                ></el-table-column>
                <el-table-column
                  width="200"
                  property="content"
                  label="备注"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                  width="170"
                  property="create_time"
                  label="创建时间"
                ></el-table-column>
              </el-table>
              <div slot="reference" class="name-wrapper">
                <el-button slot="reference" size="small">查看</el-button>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" label="offer" width="70">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag type="success" v-if="scope.row.offer === true">是</el-tag>
              <el-tag type="danger" v-else>否</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="我要求助">
          <template slot-scope="">
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-chat-dot-square"
              @current-change="showComments"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="求职总结"
          prop="summary"
          width="110"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          align="center"
          label="公司名称"
          prop="company"
          width="160"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          align="center"
          label="公司联系方式"
          prop="company_contact"
          width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          label="创建时间"
          prop="create_time"
          width="130"
        ></el-table-column>
        <el-table-column align="center" label="操作" width="130" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="showEditDialog(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="remove(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页部分 -->
    <div class="pagination" v-if="totalCount > 10">
      <el-pagination
        background
        @size-change="pageChange"
        @current-change="CurrentChange"
        :total="totalCount"
        :current-page="Page.current"
        :page-size="Page.size"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 8px;"
      ></el-pagination>
    </div>
  </d2-container>
</template>

<script>
import {
  saveApplyjob, getApplyjobList
} from '@/api/api'

import util from '@/libs/util.js'
import { dbGet } from '@/libs/util.db'
export default {
  name: 'applyjob',
  data () {
    return {
      organization: '',
      organizations: [],
      studentName: '',
      studentId: '',
      applyjobList: [], // 表格的数据
      listLoading: false, // 数据加载等待动画
      isShow: false,
      dialogVisible: false, // dialog打开弹窗的标记
      applyjobId: 0, // 求职指导id
      form: {
        interviews: [
          {
            time: '',
            content: '',
            key: Date.now()
          }
        ], // 笔试/面试列表
        jobType: '',
        jobName: '',
        applyTime: '',
        applyChannel: '',
        offer: false,
        summary: '',
        company: '',
        companyContact: ''
      },
      titleMap: {
        // 数据字典
        create: '添加求职记录',
        edit: '编辑求职记录'
      },
      dialogType: 'create',
      totalCount: 0,
      Page: {
        current: 1,
        size: 5,
        orders: ['a.create_time desc']
      },
      roleid: '',
      userid: ''
    }
  },
  created () {
    this.roleid = dbGet({
      dbName: 'roleid',
      path: 'roleid'
    })
    this.userid = util.cookies.get('user_id')
    this.getList()
  },
  methods: {
    getList () {
      const params = this.getParams()
      this.currentPage = 1
      params.pagenow = this.Page.current
      params.pagesize = this.Page.size
      getApplyjobList(params)
        .then(res => {
          this.applyjobList = res.data
          this.totalCount = res.totalcount
        })
    },
    // 显示“添加求职记录”弹窗
    showCreateDialog () {
      this.dialogType = 'create'
      this.dialogVisible = true
      this.form.interviews = []
    },
    // 重置求职记录
    resetFrom () {
      this.dialogVisible = false
      this.form.jobType = ''
      this.form.jobName = ''
      this.form.applyTime = ''
      this.form.applyChannel = ''
      this.form.interviews = []
      this.form.offer = false
      this.form.summary = ''
      this.form.company = ''
      this.form.companyContact = ''
    },
    // 新增笔试面试
    addInterview () {
      if (this.form.interviews) {
        this.form.interviews.push({
          time: '',
          content: '',
          key: Date.now()
        })
      } else {
        this.form.interviews = []
        this.form.interviews.push({
          time: '',
          content: '',
          key: Date.now()
        })
      }
    },
    // 移除笔试/面试输入框
    removeInterview (interview) {
      var index = this.form.interviews.indexOf(interview)
      if (index !== -1) {
        this.form.interviews.splice(index, 1)
      }
      if (interview.interviewsId) {
        console.log(interview.interviewsId)
        this.deleteInterviewById(interview.interviewsId)
          .then(res => {
            if (res.status !== 1) {
              this.$notify.error({
                title: '错误',
                message: res.msg
              })
            }
          })
          .catch(() => {
            this.$message.error('删除失败')
          })
      }
    },
    // 确定添加求职记录，提交到后台
    submitAdd () {
      const params = this.form
      params.interviewsList = JSON.stringify(params.interviews)
      params.userid = this.userid
      saveApplyjob(params)
        .then(res => {
          if (res.code === 200) {
            this.applyjobId = res.data.applyjob_id
            this.getList()
            this.resetFrom()
            this.$notify({
              title: '成功',
              message: res.message,
              type: 'success'
            })
          } else {
            this.$notify.error({
              title: '错误',
              message: res.message
            })
          }
        })
    },
    // 获取参数
    getParams () {
      const params = {
        user_id: this.roleid >= 3 ? '' : this.userid,
        realName: this.studentName,
        student_id: this.studentId,
        organization_id: this.organization
      }
      return params
    },

    // 点击搜索
    SearchJob () {
      this.getList()
    },
    // 显示求职回复消息
    showComments () {},
    // 分页部分
    // 改变一页数量
    pageChange (value) {
      this.Page.size = value
      this.Page.current = 1
      this.getList()
    },
    // 改变页码
    CurrentChange (value) {
      this.Page.current = value
      this.getList()
    }
  }
}

</script>

<style lang="scss">
.toolbar {
  padding: 20px;
  display: flex;
  flex-direction: row;

  .input-wrap {
    display: flex;
    height: 42px;
    width: 100%;
    line-height: 42px;
    justify-content: space-evenly;

    .toolbar-input {
      margin-top: -1px;
    }
  }
}

.pagination {
  margin: 20px;
  text-align: center;
}
.el-pagination {
  justify-content: center;
}
</style>
